<template>
	<view class="content">
		<z-paging ref="paging" v-model="ListData" @query="GetPageData">
			<template #top>
				<u-navbar :fixed="false" title="筛选" :autoBack="true" :safeAreaInsetTop="true"
					leftIconColor="#fff"></u-navbar>

				<view class="SearchBox">
					<u-search :showAction="true" v-model="searchValue" shape="square" actionText="查询" @search="OnSearch"
						@custom="OnSearch" @clear="OnSearch" :actionStyle="{color:'#fff'}"
						:animation="false"></u-search>
				</view>
			</template>


			<u-cell v-for="(item, index) in ListData" :key="index" :clickable="true" @click="toggleSelection(item)"
				:disabled="item.disabled" :style="{backgroundColor: item.disabled ? '#ebebeb' : '#fff' }">
				<template #title>
					<view class="ListCellLeft">
						<checkbox class="CheckBox" :disabled="item.disabled" :checked="item.checked" color="#fff"
							activeBackgroundColor="#51d0d0" activeBorderColor="#51d0d0">
							<view style="margin-left: 6px;">
								{{item[pageParam.serverSearch.showText]}}
							</view>
						</checkbox>
					</view>
				</template>
			</u-cell>

			<template #bottom>
				<view class="BottomBox">
					<view class="ChoiceNumBox">
						<text>已选：</text>
						<text class="Nums">{{selectedID.length}}</text>
						<text>项</text>
					</view>

					<view class="BtnBox">
						<button class="ComfigBtn CommonBtnSize" @click="confirmSelection">确定</button>
					</view>
				</view>
			</template>
		</z-paging>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				SearchKey: 'SearchKey', // 接口请求关键字
				searchValue: '', // 搜索框值
				ListData: [], // 列表数据
				Total: 0, // 列表总数
				status: 'loadmore', // 列表状态
				page: {
					pageIndex: 1, // 页码
					pageSize: 30, // 每页数量 
				},
				pageParam: {}, // 页面传递的参数
				selectedData: [], // 选中的数据 
				selectedID: [], // 选中的数据 ID
				ChoiceDataKey: '',

				Timer: null, // 防抖
			};
		},
		onHide() {
			// 关闭页面时，清除vuex中的参数数据
			this.$store.commit('ChangeAndSetStateData', {
				Name1: 'BaseScreenParm',
				data: {}
			})
		},
		onLoad(option) {
			let that = this;
			// 记录传递的参数，
			this.pageParam = this.$store.state.BaseScreenParm;

			if (!this.$utils.isEmpty(this.pageParam)) {

				// 判断是否传入搜索参数字符
				if (this.pageParam.serverSearch.hasOwnProperty('SearchKey')) {
					this.SearchKey = this.pageParam.serverSearch.SearchKey;
				};

				// 获取隐藏值字段
				this.ChoiceDataKey = this.pageParam.serverSearch['ChoiceDataKey'];

				// 判断是否需要回显已选中数据
				if (this.pageParam.serverSearch.hasOwnProperty('ChoiceDataData')) {
					// 获取已选中的对象数组数据
					this.selectedData = JSON.parse(JSON.stringify(this.pageParam.serverSearch.ChoiceDataData)) || [];
				};

				// 获取选中项的ID集合数组
				this.selectedID = this.selectedData.map(item => {
					return item[this.pageParam.serverSearch['ChoiceDataKey']]
				})
			}


		},
		methods: {
			GetPageData(pageNo) { // 获取页面数据
				let that = this;


				if (that.$utils.isEmpty(that.pageParam)) {
					return that.$refs.paging.complete(false);
				}


				// 开启加载
				this.$utils.showLoading();
				let param = {};

				// 判断是否分页
				if (that.pageParam.serverSearch.isPaging) {
					param = JSON.parse(JSON.stringify(that.pageParam.param));
					// 如果有传入搜索的字段名
					if (that.pageParam.serverSearch.hasOwnProperty('SearchKey')) {
						// 给页面搜索关键字赋值
						param[that.SearchKey] = that.searchValue;
					}
					// 使用了下拉组件，所以index的值需要使用方法带入的
					param[that.pageParam.serverSearch.pageIndexStr] = pageNo;

				} else {
					param = JSON.parse(JSON.stringify(that.pageParam.param));
				}

				try {
					that.Request.request(that.pageParam.cmd, param, function(ret) {
						if (ret.status == 200) {

							if (that.pageParam.serverSearch.isPaging) {
								that.Total = ret.data.ds1[0]['Total'];

								if (ret.data.ds1[0]['Total'] == 0) {
									// that.status = 'nomore';
									that.$refs.paging.complete([]);
									that.$utils.hideLoading()
									return
								}
							} else {
								if (ret.data.ds1[0]['Total'] == 0) {
									that.$refs.paging.complete([]);
									that.$utils.hideLoading()
									return
								}
							}

							let datas = JSON.parse(JSON.stringify(ret.data.ds))

							// 设置选中的数据
							datas.forEach((item) => {
								if (that.selectedID.includes(item[that.ChoiceDataKey])) {
									item.checked = true;
								} else {
									item.checked = false;
								}
								if (that.pageParam.serverSearch.disabledCellID) {

									if (that.pageParam.serverSearch.disabledCellID.includes(String(item[
											that
											.pageParam.serverSearch.disabledKey]))) {
										item.disabled = true;
									} else {
										item.disabled = false;
									}
								}
							});
							that.$refs.paging.complete(datas);
							that.$utils.hideLoading();

						} else {
							that.$refs.paging.complete(false);
							that.$utils.hideLoading()

							return uni.showToast({
								title: ret.data.ds[0].msg,
								icon: 'none',
								duration: 2000
							})
						}
					}, function(err) {
						// console.log(JSON.stringify(err))
						that.$refs.paging.complete(false);
						that.$utils.hideLoading()
					});

				} catch (e) {
					//TODO handle the exception
					that.$refs.paging.complete(false);
					that.$utils.hideLoading()
				}


			},
			OnSearch() { // 搜索
				this.$refs.paging.reload();
			},
			toggleSelection(item) { // 点击选项
				let that = this;

				if (item.disabled) return;

				item.checked = !item.checked;

				if (item.checked) {
					that.selectedID.push(item[that.ChoiceDataKey]);
					that.selectedData.push(item);
				} else {
					const index = that.selectedID.indexOf(item[that.ChoiceDataKey]);

					that.selectedID.splice(index, 1);
					that.selectedData.splice(index, 1);
				}

			},
			confirmSelection() { // 确认
				let that = this;
				uni.$emit(that.pageParam.ListeningName, {
					type: that.pageParam.type,
					msg: '',
					data: that.selectedData
				});

				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		// background-color: #f9f9f9;
		background-color: #fff;

		.SearchBox {
			background-color: #fff;
			background-color: #51d0d0;
			padding: 6px 10px;
		}

		.MainBox {
			flex: 1;
			overflow: auto;

		}

		.BottomBox {
			height: 70px;
			line-height: 70px;
			padding: 6px 15px;
			border-top: 1px solid #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ComfigBtn {
				background-color: #51d0d0;
				color: #fff;
				width: 20%;
				margin-left: 10px;
				min-width: 90px;
			}
		}
	}
</style>